<template>
<div class="essay_copy_cp">   
    <div 
        class="container my_box_shadow my_div_radius text_color" 
        @click="onCopy">
        <i class="el-icon-share"></i>
        复 制 链 接
    </div>
</div>
</template>
<script>
//短文复制组件
export default {
    name:'EssayCopyCp',
    props:{
        essay:{
            type:Object,
            default:()=>{
                return {};
            },
        },
    },
    methods:{
        onCopy(){
            let text = "《"+this.essay.name+"》\r\n文/"+this.essay.author+"\r\n"+"https://www.dumogu.top/essay/"+this.essay.id;
            this.$copyText(text).then((e)=>{
                this.$message({
                    message:'已复制短文连接！',
                    offset:55,
                    type:'success',
                });
            },function(e){}); 
        },
    },
}
</script>
<style lang='scss' scoped>
.essay_copy_cp{
    width: 100%;
    height: fit-content;
    >.container{
        padding: 1.2rem 0;
        font-size: 1.4rem;
        cursor:pointer;
        transition: all 0.2s;
        text-align: center;
        box-sizing: border-box;
        border: solid 0.15rem #ffffff00;
        background-color: #ffffff;
        &:hover { 
            letter-spacing:0.2rem;
            border: solid 0.15rem #ffd966;
        }
        /deep/i{
            font-size:1.5rem;
            margin-right:0.5rem;
            color: rgb(243, 69, 115);
        }
    }
}
</style>